<template>
	<!-- 遮罩层（带淡入动画） -->
	<view v-if="visible" class="modal-mask" :class="{ 'modal-mask-active': visible }" @tap="handleMaskClick">
		<!-- 弹窗主体（带缩放动画） -->
		<view class="modal-container" :class="{ 'modal-container-active': visible }" @tap.stop>
			<!-- 标题 -->
			<view class="modal-header" v-if="title">
				<text class="title">{{ title }}</text>
			</view>
			<!-- 内容插槽 -->
			<view class="modal-body">
				<slot></slot>
			</view>
			<!-- 底部按钮插槽 -->
			<view class="modal-footer" v-if="$slots.footer">
				<slot name="footer"></slot>
			</view>
			<!-- 关闭按钮 -->
			<text class="close-icon" @tap="close">×</text>
		</view>
	</view>
</template>

<script>
	export default {
		name: "center-modal",
		props: {
			visible: {
				type: Boolean,
				default: false
			},
			title: {
				type: String,
				default: ""
			},
			closeOnClickMask: { // 是否点击遮罩关闭
				type: Boolean,
				default: true
			}
		},
		methods: {
			close() {
				this.$emit("update:visible", false);
				this.$emit("close");
			},
			handleMaskClick() {
				if (this.closeOnClickMask) this.close();
			}
		}
	};
</script>

<style scoped>
	/* 遮罩层 */
	.modal-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0);
		display: flex;
		justify-content: center;
		align-items: center;
		transition: background-color 0.3s;
		z-index: 999;
	}

	/* 遮罩层激活状态 */
	.modal-mask-active {
		background-color: rgba(0, 0, 0, 0.5);
	}

	/* 弹窗容器（初始缩放为0） */
	.modal-container {
		background: #fff;
		border-radius: 16rpx;
		width: 600rpx;
		transform: scale(0);
		transition: transform 0.3s;
		position: relative;
	}

	/* 弹窗激活状态（缩放为1） */
	.modal-container-active {
		transform: scale(1);
	}

	.modal-header {
		padding: 30rpx;
		border-bottom: 1rpx solid #eee;
		text-align: center;
	}

	.title {
		font-size: 32rpx;
		font-weight: bold;
	}

	.modal-body {
		padding: 30rpx;
		max-height: 60vh;
		overflow-y: auto;
	}

	.modal-footer {
		padding: 20rpx 30rpx;
		border-top: 1rpx solid #eee;
		display: flex;
		justify-content: flex-end;
		gap: 20rpx;
	}

	.close-icon {
		position: absolute;
		top: 20rpx;
		right: 20rpx;
		font-size: 40rpx;
		color: #999;
		padding: 10rpx;
	}
</style>